<template>
    <el-container>
        <el-header>
            <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0d73bd">
                <tr>
                    <td width="269"><img height="65" src="@/assets/img/pic_top_01.gif" width="269"></td>
                    <td width="484" align="right"><font color="#000099"><img src="@/assets/img/044.gif" width="466" height="54">&nbsp;</font></td>
                </tr>
            </table>
            <table width="800" border="1" align="center" bordercolor="#5e739d" bgcolor="#5e739d">
                <tr>
                    <td width="793" height="20">
                        <div>
                            <el-link type="primary" href="/">网站首页</el-link>&nbsp;
                            <el-link type="primary" href="/#/zysxt">重要水系图</el-link>&nbsp;
                            <el-link type="primary" href="/#/sksx">沿线水库</el-link>&nbsp;
                            <el-link type="primary" href="/#/fhwj">防洪文件</el-link>&nbsp;
                            <el-link type="primary" href="/#/fhkj">防洪科技</el-link>&nbsp;
                            <el-link type="primary" href="/#/xqzb">汛前准备</el-link>&nbsp;
                            <el-link type="primary" href="/#/fhyb">防洪月报</el-link>
                        </div>
                    </td>
                </tr>
            </table>
        </el-header>

        <el-main>
            <br><br><center>防洪月报</center>
            <table width="760" border="0" cellspacing="0" cellpadding="0" align="center" height="1">
                <tr><td bgcolor="#CCCCCC"></td></tr>
            </table>
            <br>

            <div>
                <el-input placeholder="日期" v-model="searchData" clearable style="width: 200px;margin-right: 10px"></el-input>
                <el-button @click="filterData()" class="dalfBut" icon="el-icon-search">查询</el-button>
                <el-button @click="reset()" class="dalfBut" icon="el-icon-refresh">刷新</el-button>
            </div>

            <el-table :data="fileList.filter(data => !search || data.ddate.toLowerCase().includes(search.toLowerCase()))"
                      stripe
                      style="width: 670px;margin: auto"
                      height="420px"
                      current-row-key="id">
                <el-table-column prop="fileName" label="文件名" width= "200" align="center">

                    <!-- 文件下载 -->
                    <template slot-scope="scope">
                        <a @click="downloadFile(scope.row.filePath, scope.row.fileName, scope.row.id)" style="text-decoration: underline; color: blue;cursor: pointer;">{{ scope.row.fileName }}</a>
                    </template>

                </el-table-column>
                <el-table-column prop="ddate" label="日期" width= "300" align="center"></el-table-column>
                <el-table-column prop="userId" label="上传者" width= "150" align="center"></el-table-column>
            </el-table>

            <!--分页组件-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </el-main>

        <el-footer>
            <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="30">
                <tr>
                    <td bgcolor="#5E739D" valign="middle">
                        <div align="center">
                            <span>
                                <font color="#000000">
                                    <a href="/#/login"><font color="#66FF33">管理维护</font></a>
                                    &nbsp;©Copyright 2022-2023<b>&nbsp;上海局集团公司防洪办</b>&nbsp;all right reserved
                                </font>
                            </span>
                        </div>
                    </td>
                </tr>
            </table>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        name: "FHyb",
        data() {
            return {
                //文件信息
                fileList: [],
                //分页相关模型数据
                pagination: {
                    currentPage: 1,//当前页码
                    pageSize:10,//每页显示的记录数
                    total:0,//总记录数
                    //date: "",//查询条件""
                },
                search:"",
                searchData:""
            };
        },
        methods: {
            //获取所有文件
            getAll(){
                //拼接查询条件参数
                let param="";
                //param +="&date="+this.pagination.date;
                param +="&fClass=防洪月报";
                //发送异步请求
                this.$axios.get("/file/fileList?curpage="+this.pagination.currentPage+"&pagesize="+this.pagination.pageSize + param).then((res)=>{
                    this.pagination.total = res.data.data.total;
                    this.fileList = res.data.data.records;
                });
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },
            filterData(){
                let a = this.searchData;
                this.search = a;
            },
            reset() {
                location.reload();
            },
            downloadFile(url, fileName, fileId){
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href =VUE_APP_URL.BASE_URL+  '/file/downloadFile?id='+fileId;
                document.body.appendChild(link);
                link.click();
            }
        },
        mounted() {
            this.getAll();
        }
    }
</script>

<style scoped>

</style>
